<template>
  <div>
    <!-- 头部导航结构 -->
    <van-nav-bar
      title="个人中心"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon name="wap-home-o" size="5vw" />
      </template>
    </van-nav-bar>
    <!-- 1.0 用户信息 -->
    <div class="info">
      <div class="avatar">
        <van-image width="100%" height="100%" round :src="userinfo.head_img" />
      </div>
      <div class="center">
        <p class="username">
          <!-- 其实性别旧两个，可以通过 v-if v-else 互斥显示渲染一个 -->
          <i class="iconfont iconxingbienan" v-if="userinfo.gender"></i>
          <i class="iconfont iconxingbienv" v-else></i>
          <span>{{ userinfo.nickname }}</span>
        </p>
        <p class="date">{{ userinfo.create_date | formdata }}</p>
      </div>
      <!-- 点击跳转个人信息编辑 -->
      <!-- 给个人信息编辑添加id -->
      <router-link
        :to="`/user_edit?id=${$route.query.id}`"
        class="iconfont iconjiantou1"
      ></router-link>
    </div>
    <!-- 2.0 单元格 -->
    <MyCell title="我的关注" value="关注的用户" to="/userFollow"></MyCell>
    <MyCell title="我的跟帖" value="跟帖/回复" to="/user_comment"></MyCell>
    <MyCell title="我的收藏" value="文章/视频" to="/user_collect"></MyCell>
    <MyCell title="设置" value="" @click="cellFn"></MyCell>
    <!-- 3.0 退出按钮 -->
    <MyButton type="primary" @click="exitFn">退出</MyButton>
  </div>
</template>

<script>
import MyCell from "../components/MyCell.vue";
import MyButton from "../components/MyButton.vue";

import { getUserInfoAPI } from "../apis/user";
import { removeToken, removeUserID } from "../utils/localData";
//
import axios from "../utils/request";
export default {
  components: {
    MyCell,
    MyButton,
  },
  data() {
    return {
      userinfo: {},
    };
  },
  methods: {
    cellFn() {
      // console.log("我这里不是跳转，只是一个普通点击事件处理函数");
      //   this.$router.push({ path: "/attention" });
    },
    exitFn() {
      this.$dialog
        .confirm({
          title: "是否退出",
          theme: "round-button",
        })
        .then(() => {
          // 清除token
          //   localStorage.removeItem("hmtt-token");
          removeToken();
          //清除本地id
          removeUserID();
          // 跳转到首页
          //  .push()      跳转到某个页面 - 点击后退可以返回个人中心
          //  .replace()   替换成某个页面 - 点击后退就不能返回个人中心了。
          this.$router.replace({ path: "/login" });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  async created() {
    // 通过 Vue 调试工具可以更方便找到 id 到底是在那个对象上存储
    const id = this.$route.query.id;
    // 根据 id 获取用户信息
    const res = await getUserInfoAPI(id);
    // console.log(res);
    //渲染前补全头像地址
    res.data.data.head_img = axios.defaults.baseURL + res.data.data.head_img;
    this.userinfo = res.data.data;
    // console.log(this.userinfo);
  },
};
</script>

<style lang="less" scoped>
/* css tree 插件 => 选中HTML结构 => Ctrl + P => 输入 csstree  */
.info {
  height: 120px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 5px solid #ddd;
  .avatar {
    width: 80px;
    height: 80px;
  }
  .center {
    flex: 1;
    margin-left: 20px;
    .username {
      font-size: 16px;
      .iconfont {
        margin-right: 5px;
      }
      .iconxingbienan {
        color: #75b9eb;
      }
      .iconxingbienv {
        color: #f00;
      }
    }

    .date {
      font-size: 14px;
      color: #666;
    }
  }

  .iconjiantou1 {
    font-size: 14px;
  }
}
</style>